<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>menu</title>
    <link href="../lib/layui-v2.6.3/css/layui.css" media="all" rel="stylesheet">
    <link href="../css/public.css" media="all" rel="stylesheet">
    <style>
        .layui-btn:not(.layui-btn-lg ):not(.layui-btn-sm):not(.layui-btn-xs) {
            height: 34px;
            line-height: 34px;
            padding: 0 8px;
        }
    </style>
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <div>
            <div class="layui-btn-group">
                <button class="layui-btn" id="btn-expand">全部展开</button>
                <button class="layui-btn layui-btn-normal" id="btn-fold">全部折叠</button>
                <button class="layui-btn layui-btn-normal" id="btn-add">新增一级分类商品</button>

            </div>
            <table class="layui-table" id="munu-table" lay-filter="munu-table"></table>
        </div>
    </div>
</div>
<!-- 操作列 -->
<script id="auth-state" type="text/html">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="add">添加下级</a>
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script id="addform" type="text/html">
    <form class="layui-form" action="" lay-filter="menuform">
        <div class="layui-form layuimini-form">

            <div class="layui-form-item">
                <label class="layui-form-label">商品名称</label>
                <div class="layui-input-block">

                    <input type="hidden" name="id" value="" class="layui-input">
                    <input type="text" name="name" value="" class="layui-input">
                    <!--                    <input type="hidden" name="target" value="" class="layui-input">-->
                    <input id="parentId" type="hidden" name="parentId" value="" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">排序号</label>
                <div class="layui-input-block">
                    <input type="text" name="sequence" value="" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-upload">
                    <button id="img" type="button" class="layui-btn">上传商品图片</button>
                </div>
                <input id="imgPath" type="hidden" name="imgPath">
                <input id="imgId" type="hidden" name="imgId">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <input type="button" id="saveBtn" class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn"
                       value="确认保存"/>
            </div>
        </div>
    </form>
</script>

<script charset="utf-8" src="../lib/layui-v2.6.3/layui.js"></script>
<script charset="utf-8" src="../js/lay-config.js?v=1.0.4"></script>
<script charset="utf-8" src="/js/lay-module/common/common.js"></script>
<script th:inline="none">
    layui.use(['table', 'treetable', 'common', 'form', 'upload', 'element'], function () {
        var $ = layui.jquery;
        var table = layui.table,
            upload = layui.upload,
            element = layui.element,
            treetable = layui.treetable,
            form = layui.form;

        var uploadRender = function uploadRender() {
            upload.render({
                elem: "#img",
                url: "/category/attach",
                done: function (res) {
                    //从后端传来的数据之中有当前图片的id
                    var imgId = res.data.id;

                    layer.alert("上传成功");
                    $("#imgPath").val(res.data.src);
                    $("#imgId").val(imgId);
                    // console.log(res.data.msg);
                }
            });
        }



        var tableRender = function tableRender() {
            // 渲染表格
            layer.load(2);
            treetable.render({
                treeColIndex: 1,
                treeSpid: 0,
                treeIdName: 'id',
                treePidName: 'parentId',
                elem: '#munu-table',
                url: '/category/list',
                page: false,
                cols: [[
                    {type: 'numbers'},
                    {field: 'name', minWidth: 200, title: '商品名称'},
                    // {field: 'authority', title: '权限标识'},
                    {field: 'imgPath', title: '商品图片路径'},
                    {field: 'sequence', width: 80, align: 'center', title: '排序号'},
                    {templet: '#auth-state', width: 200, align: 'center', title: '操作'}
                ]],
                done: function () {
                    layer.closeAll('loading');
                }
            });
        }
        tableRender();
        //渲染上传文件按钮


        $('#btn-expand').click(function () {
            treetable.expandAll('#munu-table');
        });

        $('#btn-fold').click(function () {
            treetable.foldAll('#munu-table');
        });
        $('#btn-add').click(function () {
            layer.open({
                type: 1,
                content: $("#addform").html(),
                area: ['450px', '450px']
            });
            // uploadRender();
            $("#parentId").val(0);
        });

        $("body").on("click", "#saveBtn", function () {
            $.post("/category/save", form.val("menuform"), function () {
                tableRender();
                layer.closeAll();
            });
        });


        //监听工具条
        table.on('tool(munu-table)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;

            if (layEvent === 'del') {
                layer.confirm("您真的要删除吗？", function () {
                    $.post("/category/del?id=" + data.id, function () {
                        tableRender();
                        layer.closeAll();
                    });
                });
            } else if (layEvent === 'edit') {
                $.get("/category/" + data.id, function (res) {
                    layer.open({
                        type: 1,
                        content: $("#addform").html(),
                        area: ['450px', '450px']
                    });
                    // console.log(res);
                    uploadRender();
                    form.val("menuform", res);
                    var data = form.val();
                    var id=data.id;
                    var name=data.name;


                });
                form.render();
            } else if (layEvent === 'add') {
                layer.open({
                    type: 1,
                    content: $("#addform").html(),
                    area: ['450px', '450px']
                });
                uploadRender();
                //把当前行id放入 放到弹窗的parentID属性里
                $("#parentId").val(data.id);
            }
        });
    });
</script>
</body>
</html>